<template>
    <div class="roleManage">
        <div class="search">
            <div  class="search-form">
                <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                    <el-form-item label="角色名称">
                        <el-input v-model="queryForm.Name" placeholder="请输入角色名称" clearable />
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" color="#606266" @click="Search" icon="Search">搜索</el-button>
                    </el-form-item>
                    <el-form-item >
                        <el-button   @click="Refresh" icon="Refresh">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            
        </div>
        <div class="content">
            <div class="add-box">
                <el-button style="margin-left: 2rem;" type="primary" color="#606266" @click="handleAdd" icon="CirclePlus">添加角色</el-button>
            </div>
            <div class="table-box">
                <el-table
                :data="tableData.data"
                style="width: 100%"
                row-key="Id"
                border
                lazy
                size="large"
                :load="load"
                >
                    <el-table-column prop="Name" label="角色名称" align="center"></el-table-column>
                    <el-table-column prop="Description" label="角色描述" align="center" ></el-table-column>
                    <el-table-column prop="Action" label="操作" align="center" >
                        <template #default="scope" >
                            <el-button link  icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button link  icon="User" @click="handleMenu(scope.row)">权限</el-button>
                            <el-button link  icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-box">
                <el-pagination
                    v-model:current-page="queryForm.pageNum"
                    v-model:page-size="queryForm.pageSize"
                    :page-sizes="[100, 200, 300, 400]"
                    :size="size"
                    :disabled="disabled"
                    :background="true"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    style="--el-color-primary: #009688;"
                />
            </div>
        </div>
        <el-dialog v-model="dialogVisible" title="Shipping address" width="800">
            <el-form :model="roleForm">
                <el-form-item label="Id" :label-width="formLabelWidth">
                    <el-input v-model="roleForm.Id" disabled  />
                </el-form-item>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input v-model="roleForm.Name"  />
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input v-model="roleForm.Description"  />
                </el-form-item>

            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="menuDialogVisible" title="权限管理" width="400" style="height: 500px; overflow-y: auto;">
            <el-tree
                :data="menuData"
                show-checkbox
                default-expand-all
                :node-key="'Id'"
                highlight-current
                :props="{label:'Title'}"
                :default-checked-keys="menuSelect"
                @check="handleCheckChange"
                    />
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="menuDialogVisible = false">取消</el-button>
                    <el-button :disabled="!isChange" type="primary" @click="editRoleMenu">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup >
import {ref, onMounted} from "vue";
import { GetRoleList, addRole, updateRole, DeleteRole, GetFlatMenusByRoleId, UpdateRoleMenus } from "../../api/role";
import { GetMenuList } from "../../api/menu"
import IconSelect from "@/components/IconSelect/index.vue";
import { ElMessage } from "element-plus";
import menuTranfer from "../../components/system/menuTranfer.vue";
const queryForm = ref({
    Name: '',
    pageNum: 1,
    pageSize: 100
});
const tableData = ref([])
const dialogVisible = ref(false);
const menuDialogVisible = ref(false);
const isEdit = ref(false);
const formLabelWidth = '80px';
const menuData = ref()

const menuSelect = ref([])
const menuSelected = ref([])

const roleId = ref();
const isChange = ref(false);

const roleForm = ref({
    Id: '',
    Name: '',
    Description: '',
})

const handleAdd = () => {
    isEdit.value = false;
    dialogVisible.value = true;
    roleForm.value = {
        Id: '',
        Name: '',
        Description: '',
    }
}

const getRole = async () => {
    const res = await GetRoleList(queryForm.value);
    if(res){
        tableData.value = res;
    }
    
    
}

const handleSizeChange = async(size) => {
    console.log(size);
    queryForm.value.pageSize = size;
    getRole();
}

const handleEdit = (row) => {
    isEdit.value = true;
    dialogVisible.value = true;
    roleForm.value = {
        Id: '',
        Name: '',
        Description: '',
    }
}

const handleMenu = async (row) => {
    roleId.value = row.Id
    await getMenu(row.Id);
    menuDialogVisible.value = true;
}

const submit = async () => {
    if(isEdit.value) {
        // 编辑
        const res = await updateRole(roleForm.value);
        if(res){
            ElMessage.success("角色更新成功");
            dialogVisible.value = false;
            getRole();
        }
        
    } else {
        // 新增
        delete roleForm.value.Id; // 删除Id字段，因为新增时不需要
        const res = await addRole(roleForm.value);
        if(res){
            ElMessage.success("角色添加成功");
            dialogVisible.value = false;
            getRole();
        }
    }
}

const handleDelete = async (row) => {
    console.log(row);
    const res = await DeleteRole([row.Id]);
    if(res){
        ElMessage.success("角色删除成功");
        getRole();
    }
}

const Search = () => {
    console.log(queryForm.value);
    queryForm.value.pageNum = 1; // 重置页码
    getRole();
}

const Refresh = () => {
    queryForm.value = {
        Name: '',
        pageNum: 1,
        pageSize: 100
    }
    getRole();
}

const handleCheckChange = (data, checked) => {
    console.log(data, checked)
    menuSelected.value = checked.checkedKeys.concat(checked.halfCheckedKeys);
    isChange.value = true;
}

const getMenu = async (Id) => {
    let res = await GetMenuList({pageNum: 1, pageSize: 10000});
    if(res){
        menuData.value = res.data;
    }
    res = await GetFlatMenusByRoleId(Id);
    if(res){
        
        menuSelect.value = res;
        // menuSelected.value = res;
    }
}

const editRoleMenu = async () => {
    console.log(menuSelected.value)
    let params = {
        Id:roleId.value,
        Menus:menuSelected.value
    }
    let res = await UpdateRoleMenus(params);
    if(res){
        ElMessage.success("角色更新成功");
    }
    menuDialogVisible.value = false;
}

onMounted(async () => {
    getRole();
    
});

</script>

<style lang="less" scoped>
.roleManage {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333;
    .search{
        width: 100%;
        height: 40px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        margin-bottom: 1%;
        padding-top:  10px;
        .search-form {
            margin-left: 2rem;
        }
    }
    .content{
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        border-bottom: 1px solid #eaeaea;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        .add-box {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            // margin-left: 2rem;
        }
        .table-box {
            flex: 1;
            overflow: auto;
        }
        .page-box {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    }
}
</style>